<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
defineProps({
  introduce: Object,
  changeFlag: Boolean,
  index: Number,
  readMore: Boolean
});

const count = ref(0);
const goToZixunList = (id,title) => {
    router.push({ path: '/zixunListPc' , query: { id, type: title == '三位一体' ? 1 : title == '强基计划' ? 2 :  title == '高职提前批' ? 4 : 3  }});
};
const goToZixunDetail = (id) => {
  router.push({ path: '/zixunDetailPc', query: { id } });
};

</script>

<template>
<div>
  <div v-if="!changeFlag">
      <div class="consultationProject1">
    <div class="title" v-if="introduce.title"  @click="goToZixunDetail(introduce.id)">{{introduce.title}}</div>
    <div class="img-wrap"  @click="goToZixunDetail(introduce.id)">
      <img :src="introduce.coverimage"/>
    </div>
    <div class="desc"  @click="goToZixunDetail(introduce.id)">
     {{introduce.subtitle}}
    </div>
    <div class="btn1"  @click="goToZixunDetail(introduce.id)">查看详情</div>
  </div>
  </div>
  <div v-else>
    <div v-if="index == 0 || index == 1 || index == 2  " class="consultationProject1">
    <div class="title" @click="goToZixunDetail(introduce.id)">{{introduce.title}}</div>
    <div class="img-wrap" @click="goToZixunDetail(introduce.id)">
      <img :src="introduce.coverimage"/>
    </div>
    <div class="desc" @click="goToZixunDetail(introduce.id)">
     {{introduce.subtitle}}
    </div>
    <div class="btn" @click="goToZixunList(introduce.category_id,introduce.title )"></div>
  </div>

  <div v-if="index == 3 " class="consultationProject">
    <img :src="introduce.coverimage" @click="goToZixunDetail(introduce.id)"/>
    <div class="right">
      <div class="title" @click="goToZixunDetail(introduce.id)">{{ introduce.title }}</div>
      <div class="desc" @click="goToZixunDetail(introduce.id)">
        {{ introduce.subtitle }}
      </div>
      <div class="btn" @click="goToZixunList(introduce.category_id,introduce.title)"></div>
    </div>
  </div>
  </div>
  </div>

</template>

<style scoped lang="less">
 .btn1 {
    width: 150Px;
    height: 50Px;
    border: 1Px solid #979797;  
    margin: 0 auto;
    font-size: 24Px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #888888;
    line-height: 50Px;
    cursor: pointer;
  }
.consultationProject {
  margin-bottom: 40Px;
  border-radius: 14Px;
  text-align: center;
  border: 1Px solid rgba(0,0,0,0.1);
  width: 1200Px;
  height: 306Px;
  padding: 30Px;
  display: flex;
  align-items: center;
  img {
    width: 594Px;
    height: 246Px;
    box-shadow: 0Px 3Px 7Px 0Px rgba(0,0,0,0.5);
    margin-right: 43Px;
  }
  .right {
  .title {
    font-size: 28Px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666666;
    line-height: 40Px;
    margin-bottom: 29Px;
    font-size: 28Px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 40Px;
    background: linear-gradient(359deg, #003EFF 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
 
  .desc {
    width: 324Px;
    height: 65Px;
    font-size: 24Px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 34Px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .btn {
    width: 104Px;
    height: 40Px;
    background-image: url('../../assets/pc/homepage-more.png');
    background-size: 100% 100%;
    margin: 0 auto;
  }
 
  }
}
.consultationProject1 {
  margin-bottom: 40Px;
  width: 361Px;
  background: #ffffff;
  border-radius: 14Px;
  text-align: center;
  .title {
    font-size: 28Px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666666;
    line-height: 40Px;
    margin-bottom: 29Px;
  }
  .img-wrap {
    width: 369Px;
    height: 167Px;
    border: 1Px solid #979797;
    margin-bottom: 29Px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 344Px;
      height: 143Px;
      box-shadow: 0Px 2Px 4Px 0Px rgba(0,0,0,0.5);
    }
  }
  .desc {
    width: 324Px;
    font-size: 24Px;
    height: 65Px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 34Px;
    margin-bottom: 49Px;
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .btn {
    width: 104Px;
    height: 40Px;
    background-image: url('../../assets/pc/homepage-more.png');
    background-size: 100% 100%;
    margin: 0 auto;
  }
}
</style>
